import React, {JSX} from 'react';
import {View, Image, ImageSourcePropType, StyleSheet} from 'react-native';
import { normalize } from '../../utils/adapter';

type Props = {
  uri: ImageSourcePropType;
  width?: number;
  height?: number;
  radius?: number;
};

function Avatar({
  uri,
  width = normalize(60),
  height = normalize(60),
  radius = normalize(60),
}: Props): JSX.Element {
  return (
    <View
      style={[
        styles.image_box,
        {borderRadius: radius, width, height, overflow: 'hidden'},
      ]}>
      <Image source={uri} style={{width, height, borderRadius: radius}} />
    </View>
  );
}

const styles = StyleSheet.create({
  image_box: {
    borderWidth: 1,
    borderColor: '#fff',
    borderStyle: 'solid',
  },
});

export default Avatar;
